<!-- 发票详情 -->
<template>
  <s-layout title="发票详情" class="invoice-wrap">
    <!-- 发票金额和状态卡片 -->
    <view class="invoice-summary-card">
      <view class="summary-left">
        <view class="amount-text">{{ state.data.amount || '154' }}元</view>
        <view class="amount-label">发票金额</view>
      </view>
      <view class="summary-right">
        <view class="status-text">{{ state.data.status_text || '申请中' }}</view>
        <view class="status-label">开票状态</view>
      </view>
    </view>

    <!-- 发票类型卡片 -->
    <view class="invoice-type-card">
      <view class="card-left">发票类型</view>
      <view class="card-right">{{ state.data.type_text || '电子发票' }}</view>
    </view>

    <!-- 发票信息卡片 -->
    <view class="invoice-info-card">
      <view class="info-row">
        <view class="info-label">发票抬头</view>
        <view class="info-value">{{ state.data.name || '公司' }}</view>
      </view>
      <view class="info-row" v-if="state.data.type === 'company'">
        <view class="info-label">公司名称</view>
        <view class="info-value">{{ state.data.company_name || '北京****有限公司' }}</view>
      </view>
      <view class="info-row" v-if="state.data.type === 'company'">
        <view class="info-label">企业税号</view>
        <view class="info-value">{{ state.data.tax_no || '781301802' }}</view>
      </view>
      <view class="info-row">
        <view class="info-label">邮箱地址</view>
        <view class="info-value">{{ state.data.email || '12345678@163.com' }}</view>
      </view>
      <view class="info-row">
        <view class="info-label">申请时间</view>
        <view class="info-value">{{ state.data.createtime || '2025-02-12 12:30:20' }}</view>
      </view>
    </view>

    <!-- 开票单号卡片 -->
    <view class="invoice-number-card">
      <view class="card-left">开票单号</view>
      <view class="card-right">{{ state.data.invoice_no || '2384083208410023' }}</view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';

  const state = reactive({
    data: {},
  });

  async function getInvoiceDetail(id) {
    const { data } = await sheep.$api.order.invoice(id);
    state.data = data;
  }
  
  onLoad((options) => {
    getInvoiceDetail(options.invoiceId);
  });
</script>

<style lang="scss" scoped>
  .invoice-wrap {
    background: #f5f5f5;
    min-height: 100vh;
    padding: 20rpx;
  }

  // 发票金额和状态卡片
  .invoice-summary-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .summary-left {
      .amount-text {
        font-size: 48rpx;
        font-weight: bold;
        color: #FF7C00;
        line-height: 1.2;
        margin-bottom: 8rpx;
      }
      .amount-label {
        font-size: 24rpx;
        color: #999;
        line-height: 1.2;
      }
    }

    .summary-right {
      text-align: right;
      .status-text {
        font-size: 32rpx;
        font-weight: 500;
        color: #52c41a;
        line-height: 1.2;
        margin-bottom: 8rpx;
      }
      .status-label {
        font-size: 24rpx;
        color: #999;
        line-height: 1.2;
      }
    }
  }

  // 发票类型卡片
  .invoice-type-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-left {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
    .card-right {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }

  // 发票信息卡片
  .invoice-info-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        flex-shrink: 0;
        width: 160rpx;
      }
      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        flex: 1;
        text-align: right;
        word-break: break-all;
      }
    }
  }

  // 开票单号卡片
  .invoice-number-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-left {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
    .card-right {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
</style>
